<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <link rel="stylesheet" href="/static/assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>日志检索中台</title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <div class="layui-form layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-form-mid">客户端ID:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">项目名称:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">项目备注:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" autocomplete="off" class="layui-input">
                            </div>
                            <button class="layui-btn layui-btn-blue">查询</button>
                        </div>
                        <div class="layui-inline" style="float: right">
                            <button class="layui-btn layui-btn-blue"><i class="layui-icon">&#xe654;</i>新增项目</button>
                        </div>
                    </div>
                    <table id="item"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/assets/layui.all.js"></script>
<script>
    var element = layui.element;
    var table = layui.table;
    var form = layui.form;

    //展示已知数据
    table.render({
        elem: '#item'
        , cols: [[ //标题栏
            {field: 'id', title: 'ID', width: 80, sort: true}
            , {field: 'clientId', title: '客户端ID', minWidth: 100, sort: true}
            , {field: 'itemName', title: '项目名称', minWidth: 100}
            , {field: 'itemDesc', title: '项目备注', minWidth: 200}
            , {field: 'logPath', title: '日志路径', minWidth: 300}
            , {field: 'logPrefix', title: '日志前缀', minWidth: 80}
            , {field: 'logSuffix', title: '日志后缀', minWidth: 80}
        ]]
        , data: [{
            "id": "10001"
            , "clientId": "10001"
            , "itemName": "hao-zhen-suo-demo"
            , "itemDesc": "好诊所测试工程"
            , "logPath": "/app/data/logs/haozhensuo"
            , "logPrefix": "server_"
            , "logSuffix": ""
        }, {
            "id": "10002"
            , "clientId": "10001"
            , "itemName": "hao-zhen-suo-demo"
            , "itemDesc": "好诊所测试工程"
            , "logPath": "/app/data/logs/haozhensuo"
            , "logPrefix": "server_"
            , "logSuffix": ""
        }, {
            "id": "10003"
            ,"clientId": "10002"
            ,"itemName": "hao-zhen-suo-demo"
            ,"itemDesc": "好诊所测试工程"
            ,"logPath": "/app/data/logs/haozhensuo"
            ,"logPrefix": "server_"
            ,"logSuffix": ""
        }]
        , skin: 'line' //表格风格
        , even: true
        , page: true //是否显示分页
        , limits: [5, 7, 10]
        , limit: 2 //每页默认显示的数量
    });
</script>
</body>
</html>